<template>
  <div id="movie">
    <h1>猫眼电影</h1>
    <van-tabs v-model="active">
    <van-tab :title="cityname"><City @city="changecity"></City></van-tab>

    <van-tab title="热映"><HotList :hotlist="hotlist"></HotList></van-tab>

    <van-tab title="待映"><ReadyList :readylist="readylist"></ReadyList></van-tab>

    <!-- 搜索 -->
    <van-tab><template #title><van-icon name="search" class="mm"/></template><van-search placeholder="请输入搜索的电影" /></van-tab>

    </van-tabs>
  </div>
</template>

<script>
import City from "../components/City.vue";
import HotList from "../components/HotList.vue";
import ReadyList from "../components/ReadyList.vue";
export default {
    name:'movieview',
    components:{HotList,ReadyList,City},
    created(){
    this.getMovieList()
    },
    data(){
        return {
            active:1,
            hotlist:[],
            readylist:[],
            cityname:'城市',
        }
    },
    methods:{
        getMovieList(){
            this.axios.get("index/movieOnInfoList").then(re =>{
                this.hotlist=re.movieList
            })
            this.axios.get("index/mostExpected").then(re =>{
                this.readylist=re.coming
            })
        },
        changecity(name){
            this.cityname=name
        }   
    },

}
</script>

<style scoped>
*{
    padding: 0;
    margin: 0;
}
#movie h1{
    width: 100%;
    text-align: center;
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    background-color: rgb(235, 56, 56);
    color: white;
    font-weight: 500;
}
#movie .mm{
    position: absolute;
    font-size: 25px;
    font-weight:700;
    right: 5;
    top: 12px;
}
</style>

